<template>
    <div class="content" v-loading="!resetEcharts">
        <ChartContent v-if="resetEcharts" :data="bugOption" />
    </div>
</template>
<script>

import ChartContent from "@/components/ChartContent"
import bugConfig from "./bugDataConfig"
export default {
    components: { ChartContent },
    props: {
        dataList: {
            type: Array,
            default: []
        },
    },
    data() {
        return {
            bugOption: {},
            resetEcharts: false,
        }
    },
    created() {
        this.setEchartsData();
    },
    methods: {
        async setEchartsData() {
            this.resetEcharts = false;
            let data = this.filterDataList(this.dataList);
            let { option } = bugConfig
            let options = JSON.parse(JSON.stringify(option))
            let obj = this.getBugInfo(data)
            let endLength = (4 / data.length) * 100;
            this.bugOption = {
                ...options,
                ...obj,
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: endLength
                    }
                ],
                tooltip: {
                    trigger: 'item', // 使用 'item' 来触发每个柱子的提示信息
                    formatter: function (params) {
                        var res = params.name + '<br/>';
                        res += params.seriesName + ': ' + params.value;
                        return res;
                    }
                },
            };
            this.$nextTick(() => {
                this.resetEcharts = true;
            })
        },
        filterDataList(list) {
            return list.map(e => {
                let { bugOne, bugTwo, bugThree, bugFour, projectName } = e
                return {
                    projectName: projectName || '未查询到项目名称',
                    bugOne: bugOne ? bugOne : {},
                    bugTwo: bugTwo ? bugTwo : {},
                    bugThree: bugThree ? bugThree : {},
                    bugFour: bugFour ? bugFour : {},
                }
            })
        },
        // bugInfo :[
        //     {
        //       projectName: '项目1',
        //       bugOne: { finishedBugNum: 1, notFinishedBugNum: 0 },
        //       bugTwo: { finishedBugNum: 5, notFinishedBugNum: 1 },
        //       bugThree: { finishedBugNum: 4, notFinishedBugNum: 2 },
        //       bugFour: { finishedBugNum: 0, notFinishedBugNum: 0 }
        //     }]
        getBugInfo(bugInfo) {
            let keyList = [{
                key: 'finishedBugNum',
                lable: '已完成'
            }, {
                key: 'notFinishedBugNum',
                lable: '未完成'
            }]
            //这里补充后端接口请求结果
            return {
                xAxis: [
                    {
                        type: 'category',
                        data: bugInfo.map(e => e.projectName)
                    }
                ],
                series: this.transformData(keyList, bugInfo)
            }
        },
        transformData(keyList, bugInfo) {
            // 定义bug级别与对应的数字和stack名称的映射
            const bugLevels = [
                { prop: 'bugOne', level: '1', stack: 'one' },
                { prop: 'bugTwo', level: '2', stack: 'two' },
                { prop: 'bugThree', level: '3', stack: 'three' },
                { prop: 'bugFour', level: '4', stack: 'four' }
            ];
            const result = [];
            // 遍历每个键（如已完成、未完成）
            for (const keyItem of keyList) {
                const { key, lable } = keyItem;
                // 遍历每个bug级别
                for (const levelInfo of bugLevels) {
                    const { prop, level, stack } = levelInfo;
                    // 收集当前键和级别的数据
                    const data = bugInfo.map(project => project[prop][key] || 0);
                    // 构建系列对象
                    result.push({
                        name: `${lable}${level}级bug`,
                        type: 'bar',
                        barWidth: '8%',
                        barGap: 0.5,
                        label: {
                            show: true,
                            position: 'top',
                            formatter: lable == '未完成' ? `${level}级` : ''
                        },
                        stack: stack,
                        emphasis: { focus: 'series' },
                        data: data
                    });
                }
            }
            return result;
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;
}
</style>